<template>
	<view class="hotelDetails">
		<!-- <image class="hotelPn" :src="baseOssUrl + 'icon/imgpn.png'" mode=""></image> -->
		<view class="lb-img" @click='goAlbum'>
			<view class="icon-img">
				<button class="icon-btn" type="default" @click.stop='goCollection'>
					<image class="iconPn" v-if="isCollection" :src="baseOssUrl + 'icon/xz-collection.png' " mode="">
					</image>
					<image class="iconPn" v-else :src="baseOssUrl + 'icon/collection.png' " mode=""></image>
				</button>

				<button type="default" class="icon-btn" open-type="share" catchtap="share">
					<image class="iconPn" :src="baseOssUrl + 'icon/share.png' " mode=""></image>
				</button>
			</view>
			<fui-swiper-dot type="4" :items="swpItems" :current="current" :styles="styles">
				<swiper class="fui-banner__wrap" @change="swpChange" circular :indicator-dots="false" autoplay
					:interval="4000" :duration="150">
					<!-- baseOssUrl2  -->
					<swiper-item v-for="(item,index) in swpItems" :key="index">
						<view class="fui-banner__item">
							<image :src="baseOssUrl2 + item.arr" mode="aspectFill" alt="" />
							<!-- <img :src="item.url" alt=""> -->
						</view>
					</swiper-item>
				</swiper>
			</fui-swiper-dot>
		</view>
		<view class="hotelDetaCotent marin25">
			<view class="hotel-title">
				<view class="title-text">
					{{hotelTitle}}
				</view>
				<view class="pingfen">
					4.6分
				</view>
			</view>
			<view class="hot-address">
				<view class="address-cont">
					<image class="addresspn" :src="baseOssUrl + 'icon/address.png' " mode=""></image>
					{{city}}
				</view>
				<image @click="gotoBnt" class="go-address" :src=" baseOssUrl +'icon/go-address.png'" mode=""></image>
			</view>

			<view class="bioa-style">
				<view v-for="(item,index) in pnItems" :key='index' class="biao-list">
					<view class="biao-item">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<!-- specific -->
		<!-- 选择时间 房型 start-->
		<view class="specificContent marin25">
			<fui-bottom-popup :show="popupShow" @close="closeTimePopup">
				<view class="timeHeader">
					请选择日期
					<image :src="baseOssUrl+'icon/closePn.png'" mode="" @click="closeTimePopup"></image>
				</view>
				<view class="fui-custom__wrap">
					<fui-calendar type="3" showLunar @change="calendarChange" activeBackground='#35743D'></fui-calendar>
				</view>
				<fui-button text="完成" background="#35743D" width='96%' :margin="['0', '17rpx']" radius='50rpx'
					@click="closeTimePopup"></fui-button>
			</fui-bottom-popup>
			<view class="flex-ruzhu" @click="showTimePopup">
				<!-- 日期选择 -->
				<view class="ruzhu-time" v-if="startWeek">
					{{startTime}}
					<view class="ruzhu-week">
						{{startWeek}}
					</view>
				</view>
				<view class="ruzhu-time" v-else>
					<!-- {{defaultStart}} -->
					{{startTime}}
					<view class="ruzhu-week">
						{{this.getWeekDate(this.defaultAllstart)}}
					</view>
				</view>
				<!-- 共一晚 -->
				<view class="all-time" v-if="staTimevalue">
					共{{this.getDiffDay(this.staTimevalue, this.endTimevalue)}} 晚
				</view>
				<view class="all-time" v-else>
					共1晚
				</view>

				<view class="lidian-time" v-if="endWeek">
					<!-- 8月30日 -->
					{{endTime}}
					<view class="lidian-week">
						{{endWeek}}
					</view>
				</view>
				<view class="lidian-time" v-else>
					<!-- {{defaultEnd}} -->
					{{endTime}}
					<view class="lidian-week">
						{{this.getWeekDate(this.defaultAllend)}}
					</view>
				</view>
			</view>
			<!-- 房间内容 -->
			<view class="roomContent">
				<fui-collapse @change="collapseChange">
					<!-- :arrow ='false' 两种房型，一是没有下拉的为false 二是有下拉的带有按钮为true -->
					<fui-collapse-item v-for="(item,pageIndex) in pageList " :key='pageIndex'>
						<view class="fui-item__box room-cont">
							<view class="img-rom">
								<image class="" :src="baseOssUrl2+ typeImg" mode="" @click.stop="goAlbum"></image>
							</view>
							<view class="room-list">
								<view class="room1">
									{{item.name}}
								</view>
								<view class="room2">
									{{item.text || ''}}
								</view>
								<view class="room3">
									<view class="room-ro3">
										<view class="room-tag" v-for="(ih,hIndex) in housePnItems" :key='hIndex'>
											<!-- {{item.tag}} -->
											{{ih || ''}}
										</view>
									</view>
									<view class="room3-price"
										v-if="item.merchantRoomList[0].price&&item.merchantRoomList[0].jg">
										¥{{(item.merchantRoomList[0].jg)>(item.merchantRoomList[0].price)?(item.merchantRoomList[0].price):(item.merchantRoomList[0].jg)}}
										<text>起</text>
									</view>
									<view class="room3-price">
										¥{{item.merchantRoomList[0].jg}}
										<text>起</text>
									</view>
								</view>
								<!-- <view class="room4">
									入住当天18:00前可免费取消 需要等待
									<view class="room-method">
										<view class="method1"> 
										</view>
										<view class="method2">
											在线付
										</view>
									</view>
								</view> -->
								<!-- <view class="room5">
									优惠30元
								</view> -->
							</view>

						</view>
						<template v-slot:content>
							<view class="fui-descr" v-for="(i,mIndex) in item.merchantRoomList" :key='mIndex'
								@click='houseshowPopup(item,i.id,i.jg)'>
								<view class="fui-fold">
									<view class="fold1">
										<text class="house-text">{{i.name}}</text>
										<!-- <text class="house-num">仅一间</text> -->
									</view>
									<view class="fold2">
										<view class="fold-biao">
											<view class="biao-t">
												<!-- {{i.bq || ''}} -->
												{{i.livableUser}}人
											</view>
											<view class="biao-t">
												{{i.breakfast}}
											</view>
											<view class="biao-t">
												{{i.window}}
											</view>
										</view>
										<view class="room-method" @click.stop="bookClick(item,i.id,i.jg)">
											<view class="method1">
												{{ismethod}}
											</view>
											<view class="method2">
												在线付
											</view>
										</view>
									</view>
									<view class="fold3">
										<view class="fold-price">
											¥{{i.jg}}
											<!-- <text class="fold-text">¥499</text> -->
										</view>
										<!-- <view class="fold-discount">
											优惠30元
										</view> -->
									</view>
								</view>
							</view>
						</template>
					</fui-collapse-item>
				</fui-collapse>
			</view>
			<!-- 房型详情弹窗 -->
			<fui-bottom-popup :show="houseShow" @close="houseclosePopup" style="position: relative; z-index: 999;">
				<scroll-view scroll-y="true" style="height: 1200rpx;">
					<!-- <image :src="baseOssUrl + 'icon/imgpn.png'" mode=""></image> v-for="(popuItem,popuIndex) in poupData" :key="popuIndex"-->
					<view v-for="(popuItem,popuIndex) in poupData" :key="popuIndex">
						<image :src="baseOssUrl2 + typeImg" mode=""></image>
						<view class="fui-custom__house">
							<view class="show-house-content">
								<view class="house-content-title">
									{{popuItem.name}}
								</view>
								<fui-row margin-bottom="30rpx" class="house-conten-trait">
									<fui-col :span="6" v-for="(item1,hoIndex) in houseTrait" :key='hoIndex'
										class="trait-item">
										<view style="padding: 10rpx 0;">
											{{item1}}
										</view>
									</fui-col>
								</fui-row>
							</view>
							<!-- 饮食等规则 -->
							<view class="show-house-policy marin25">
								<view class="policy-name">
									食品饮食
								</view>
								<view class="policy-explain">
									<view class="pol-item" v-for="(item2,spIndex) in popuItem.spys" :key='spIndex'>
										{{item2}}
									</view>
								</view>
							</view>
							<view class="show-house-policy marin25">
								<view class="policy-name">
									费用政策
								</view>
								<view class="policy-explain">
									<view class="pol-item" v-for="(item,fyIndex) in popuItem.fyzc" :key='fyIndex'>
										{{item}}
									</view>
								</view>
							</view>
							<view class="show-house-policy marin25">
								<view class="policy-name">
									便利设施
								</view>
								<view class="policy-explain">
									<view class="pol-item" v-for="(item,blIndex) in popuItem.blss" :key='blIndex'>
										{{item}}
									</view>
								</view>
							</view>
							<view class="show-house-policy marin25">
								<view class="policy-name">
									浴室配套
								</view>
								<view class="policy-explain">
									<view class="pol-item" v-for="(item,ysIndex) in popuItem.yspt" :key='ysIndex'>
										{{item}}
									</view>
								</view>
							</view>
							<view class="show-house-policy marin25">
								<view class="policy-name">
									洗浴用品
								</view>
								<view class="policy-explain">
									<view class="pol-item" v-for="(item,xyIndex) in popuItem.xyyp" :key='xyIndex'>
										{{item}}
									</view>
								</view>
							</view>
							<!-- 房型说明 -->
							<view class="house-type marin25">
								房型说明
								<view class="ht-text">
									房型图片仅可代表其中部分房间以作为预订参考，实际提供房型信息请以文字信息为准，如文字信息不全或包含多种情况，请提前与商家沟通确认后再下单预订
								</view>
							</view>
							<!-- 政策服务 -->
							<view class="policy-services marin25">
								政策服务
								<view class="services-title">
									确认较快
									<!-- <view class="scontent-title">
										{{popuItem.zcfw}}
									</view> -->
									<!-- <view class="bioa-style"> -->
									<view v-for="(item,index) in zcfwList" :key='index' class="scontent-title">
										<view class="biao-item">
											{{item}}
										</view>
									</view>
									<!-- </view> -->
								</view>
							</view>
							<!-- 商家取消政策 -->
							<view class="merchant-services marin25">
								商家取消政策
								<view class="tservices-title">
									限时取消
									<view class="tscontent-title">
										<!-- {{popuItem.qxzc}} -->
										{{cancelZc}}
									</view>

								</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<!-- 查看房型 -->
				<view class="lookBook">
					<view class="price-book">
						<view class="book-yaun">
							<!-- <text class="yaun-yuan">¥499</text> -->
							<text class="yaun-num">¥{{price}}</text>
							<!-- <text class="yaun-num">¥{{}}</text> -->

						</view>
						<!-- <view class="book-num">
							优惠30元
						</view> -->
					</view>
					<view class="lookbtn" @click="bookClick1">
						预订
					</view>
				</view>
			</fui-bottom-popup>
		</view>
		<!-- end -->
		<!-- 网友评价 start-->

		<view class="netFriend marin25" @click="userClick">
			<view class="net-text">
				<text class="ntext">评分</text>
				<text class="ntext1">更多评价</text>
			</view>

			<view class="net-content">
				<view class="content-head marin25">
					<view class="head-left">
						<!-- 超棒 -->
						<view class="leftpf">
							{{dfzhs.zf || '0'}}
						</view>
					</view>
					<view class="head-right">

						<view class="right1" v-for="(item,index) in ringList" :key='index'>
							<circle-progress-bar :pro="item.isPfeng" :start="0" size='100' border_width='5'
								border_color='#35743D' border_back_color='#DDD' background='#EFEFEF' :animate='true'>

							</circle-progress-bar>
							{{item.name}}
							<text class="right-ring">{{item.ringPf}}</text>
						</view>
					</view>
				</view>
				<view class="content-comment marin25" v-if="plLists.length != 0">
					<view class="" v-for=" (item,index) in plLists" :key="index">
						<view class="persdata">
							<view class="persdata-left">
								<image style="border-radius: 50%;" :src="baseOssUrl2 + item.tx " mode=""></image>
								<view class="pdata-center">
									{{item.username}}
									<view class="pdata-time">{{item.cjTime}}发表</view>
								</view>
							</view>
							<view class="persdata-right">
								<fui-rate :score=item.xj size='30' disabled></fui-rate>
							</view>
						</view>
						<view class="persdat-details">
							{{item.text}}
						</view>
						<view class="rating-imgs" v-if="item.images.length != 0">
							<image :src="baseOssUrl2 + item1" mode="" v-for="(item1,index1) in item.images"
								:key='index1' @click="showGallery(item.images,index1)"></image>
							<fui-gallery :urls="ratingImgs" :show="bigImgshow" @hide="hideGallery"></fui-gallery>
						</view>
					</view>
					<!-- <view class="consumed">
												已消费：超级特惠双人餐username 名
						tx 头像
						cjTime 评论时间
						text 内容 
						xj 打分星级
						images 多图
						
											</view> -->
					<view class="persdat-all">
						全部{{pltotal}}条评价 >
					</view>
				</view>
				<view class="content-comment marin25" v-if="plLists.length == 0">
					<view class="persdat-all">
						暂无评价
					</view>
				</view>

			</view>
		</view>
		<!-- end -->
		<!-- 酒店详情 -->
		<view class="hotelParticular marin25">
			<text class="htext">酒店详情</text>
			<view class="particular-content">
				<fui-tabs :tabs="changetabs" :isSlider='false' @change="changeTab" selectedColor='#35743D'
					sliderBackground='#35743D'></fui-tabs>
				<view class="pcont-tab marin25" v-show="tabFn == 0">
					<view class="pctab1">
						{{hotelTitle}}
					</view>
					<view class="pctab1-phone">
						电话：
						{{hotlPhone.length == '0' ? '无' : hotlPhone}}
					</view>
					<view class="pctab1-guide">
						入住指南
						<view class="pctab1-guide-text">
							{{zcfwList.length == '0' ? '无' : zcfwList}}
						</view>

					</view>
					<view class="pctab1-hotel">
						酒店设施
						<view class="pb1-space">
							{{jdList.length == '0' ? '无' : jdList}}
						</view>
					</view>
				</view>

			</view>

		</view>
		<!-- end -->

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2

	} from '@/common/settings';
	import circleProgressBar from '@/components/component/circle-progress-bar'
	export default {
		computed: mapState(['userId']),
		data() {
			return {
				id: '',
				form: '', // 详情
				plLists: {}, //评价列表
				pltotal: '',
				dfzhs: {},
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				pnItems: [],
				popupShow: false,
				staTimevalue: '',
				endTimevalue: '',
				startTime: '',
				endTime: '',
				startWeek: '',
				endWeek: '',
				defaultStart: '', //默认开始时间
				defaultEnd: '', //默认结束时间
				defaultWeek: '', //默认星期
				defaultWeek1: '',
				defaultAllstart: '',
				defaultAllend: '',
				ismethod: '抢',
				ringList: [{
						name: '位置',
						ringPf: '0',
						isPfeng: 0
					},
					{
						name: '设施',
						ringPf: '0',
						isPfeng: 0
					},
					{
						name: '服务',
						ringPf: '0',
						isPfeng: 0
					},
					{
						name: '卫生',
						ringPf: '0',
						isPfeng: 0
					},
				],
				changetabs: [{
					//标签显示文本（String）
					name: '酒店亮点'
				}, ],
				tabFn: 0,
				houseShow: false,
				flag: true,
				houseTrait: ['1张大床1.8米', '38m²', '2层', '有窗', '禁烟', '无早餐', 'WiFi'],
				policyList: [{
						name: '食品饮食 ',
						explain: '电热水壶 厨房用具免费 '
					},
					{
						name: '食品饮食 ',
						explain: '电热水壶 厨房用具免费 ,费用政策 加床：该房型不可加床 停车场'
					},
					{
						name: '食品饮食 ',
						explain: '24小时热水，独立淋浴间， 吹风机，拖鞋 洗浴用品 牙刷，牙膏，洗发水，沐浴露'
					},
					{
						name: '食品饮食 ',
						explain: '电热水壶 厨房用具免费 '
					}
				],
				// 轮播图
				swpItems: [{
					url: baseOssUrl + 'icon/imgpn.png',
				}, {
					url: baseOssUrl + 'icon/imgpn.png',
				}, {
					url: baseOssUrl + 'icon/imgpn.png',
				}],
				current: 0,
				styles: {
					width: 50,
					right: 0,
					height: 30,
					bottom: 80,
					activeBackground: '#FFFFFF',
					activeWidth: 40,
					size: 24,
					background: 'rgba(0,0,0,.6)',
				},
				mId: '',
				ydTime: '',
				page: 1,
				limit: 10,
				pageList: [],
				hotelTitle: '', //酒店标题
				city: '', //酒店位置
				housePnItems: [],
				poupData: [],
				poupDataItem: {},
				hotlPhone: '', //酒店电话
				hotelGuide: '', //酒店入住指南
				hotelFacilities: '', //酒店设施
				spys: '',
				yspt: '',
				xyyp: '',
				qxzc: '',
				fyzc: '',
				blss: '',
				poupName: '',
				poupImg: '',
				storePhotos: [], //轮播图
				isCollection: false, //是否收藏
				price: '',
				typeImg: '', //类型图片
				// unPolicy:'',//取消政策1.30分钟2.unDate
				// unDate:'',
				cancelZc: '',
				zcfwList: '' ,//政策服务
				jdList:''
			}
		},
		onLoad(op) {
			console.log("opdetails", op)
			this.mId = op.id
			this.ydTime = op.ydTime
			this.startTime = op.startTime
			this.endTime = op.endTime
			this.startWeek = op.startWeek
			this.endWeek = op.endWeek
			this.staTimevalue = op.staTimevalue
			this.endTimevalue = op.endTimevalue
			// this.getNum = this.getDiffDay(this.staTimevalue, this.endTimevalue)
			this.hotelTitle = op.hotelTitle
			this.city = op.address
			this.pnItems = JSON.parse(op.pnItems)
			this.hotlPhone = op.hotlPhone
			this.hotelGuide = op.hotelGuide
			this.hotelFacilities = op.hotelFacilities
			// this.unPolicy = op.unPolicy
			// this.unDate = op.unDate
			if (op.unPolicy == 1) {
				this.cancelZc = '30分钟'
			} else if (op.unPolicy == 2) {
				this.cancelZc = op.unDate
			}
			this.zcfwList = []
			this.zcfwList = JSON.parse(op.zcfwList)
			this.jdList = []
			this.jdList = JSON.parse(op.jdList)
			// this.storePhotos = JSON.parse(op.storePhotos);//轮播图
		},
		// onShareAppMessage() {
		// 	return {
		// 		title: '分享' + this.boxList[0].productStock + '酒店，快快查看',
		// 		path: '/pages/share1/share1?inviteCode=' + this.inviteCode + '&&orderNo=' + this.boxList[0].giveOrderNo,
		// 		success(res) {
		// 			uni.showToast({
		// 				title: '分享成功'
		// 			});
		// 		},
		// 		fail(res) {
		// 			uni.showToast({
		// 				title: '分享失败',
		// 				icon: 'none'
		// 			});
		// 		}
		// 	};
		// },
		created() {
			// this.getData()
		},
		onShow() {
			this.getData()
			this.dfzh()
			this.plList()
		},
		components: {
			circleProgressBar
		},
		mounted() {
			this.getList()
			this.getCollection()
			this.getMerchantInfo()
		},
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效
		methods: {
			// 获取轮播图
			getMerchantInfo() {
				this.$http.post(this.$httpApi.merchantInfo, {
					data: {
						id: this.mId,
					}
				}).then(res => {
					if (res.code == 0) {
            let arrData = JSON.parse(res.merchant.storeImages);
            let arr = [];
            arrData.map((item,index) => {
              if (item.arr != '') {
                if (item.arr.indexOf(',') !== -1) {
                  item.arr = item.arr.split(',')[0]
                }
                arr.push(item)
              }
            })
            this.swpItems = arr;
					}
				})
			},
			// 评分
			dfzh() {
				this.$http.get(this.$httpApi.dfzh, {
					data: {
						mId: this.mId
					}
				}).then(res => {
					if (res.code == 0) {
						this.dfzhs = res.data
						this.dfzhs.zf = parseFloat(res.data.zf).toFixed(2)
						this.ringList[0].ringPf = parseFloat(res.data.wzdfSum).toFixed(2)
						this.ringList[1].ringPf = parseFloat(res.data.ssdfSum).toFixed(2)
						this.ringList[2].ringPf = parseFloat(res.data.fwdfSum).toFixed(2)
						this.ringList[3].ringPf = parseFloat(res.data.wsdfSum).toFixed(2)
						this.ringList[0].isPfeng = parseFloat(res.data.wzdfSum / 5).toFixed(2)
						this.ringList[1].isPfeng = parseFloat(res.data.ssdfSum / 5).toFixed(2)
						this.ringList[2].isPfeng = parseFloat(res.data.fwdfSum / 5).toFixed(2)
						this.ringList[3].isPfeng = parseFloat(res.data.wsdfSum / 5).toFixed(2)
					}
				})
			},
			// 评价列表
			plList() {
				this.$http.get(this.$httpApi.plList, {
					data: {
						mId: this.mId,
						page:1,
						limit: 5
					}
				}).then(res => {
					if (res.code == 0) {
						this.plLists = res.page
						this.plLists.forEach(item => {
							if (item.images) {
								console.log(item, 'itemitemitem')
								var arr = [];
								arr = item.images.split(',')
								console.log(arr)
								item.images = arr
							}

						})
						this.pltotal = res.total
					}
					// if (res.code == 0) {
					// 	this.plLists = res.page[0]
					// 	var arr = [];
					// 	arr  = res.page[0].images.split(',')
					// 	this.plLists.images = arr
					// 	console.log(this.plLists.image)
					// 	this.pltotal = res.total
					// }
				})
			},
			// 查看是否已收藏
			getCollection() {
				this.$http.get(this.$httpApi.ifCollection, {
					data: {
						userId: this.userId,
						mId: this.mId,
					}
				}).then(res => {
					if (res.code == 0) {
						if (res.flag == 0) {
							this.isCollection = false
						} else if (res.flag == 1) {
							this.isCollection = true
						}
					}
				})
			},
			// 添加收藏
			saveCollection() {
				this.$http.post(this.$httpApi.addCollection, {
					data: {
						userId: this.userId,
						mId: this.mId,
						type: 1
					}
				}).then(res => {
					if (res.code == 0) {}
				})
			},
			// 取消收藏
			deletCollection() {
				this.$http.post(this.$httpApi.deleteCollection, {
					data: {
						userId: this.userId,
						mId: this.mId,
					}
				}).then(res => {
					if (res.code == 0) {}
				})
			},
			goCollection() {
				this.isCollection = !this.isCollection
				if (!this.isCollection) {
					this.deletCollection()
				} else {
					this.saveCollection()
				}
			},
			getList() {
				this.$http.get(this.$httpApi.merchantroomtype, {
					data: {
						page: this.page,
						limit: this.limit,
						mId: this.mId,
						ydTime: this.ydTime
					}
				}).then(res => {
					if (res.code == 0) {
						this.pageList = res.page;
						this.pageList.forEach(val => {
							if (val.image && val.image.indexOf(',') == -1) {
								this.typeImg = val.image
							} else {
								this.typeImg = val.image.split(',')[0]
								console.log("取", this.typeImg)
							}
						})
						// 标签处理
						this.housePnItems = []
						// tag字段
						this.pageList.forEach(val => {
							if (val.tag.indexOf(',') == -1) {
								this.housePnItems.push(val.tag)
							} else {
								this.housePnItems = val.tag.split(",")
							}
						})
					}
				})
			},

			goShare() {
				console.log("分享")
			},
			goAlbum() {
				uni.navigateTo({
					url: "/pages/album/index?id=" + this.mId
				})
			},
			bookClick(item, roomId, price) {
				this.roomId = roomId
				this.price = price
				this.poupDataItem = item
				// 酒店名字，入住时间  酒店id （spId == roomId） mid   '&mid='+ this.mid  
				uni.navigateTo({
					url: "/pages/orderConfim/index?hotelTitle=" + this.hotelTitle + '&ydTime=' + this.ydTime +
						'&poupData=' + JSON.stringify(this.poupDataItem) + '&price=' + this.price + '&startTime=' +
						this.startTime + '&endTime=' + this.endTime + '&staTimevalue=' + this.staTimevalue +
						'&endTimevalue=' + this.endTimevalue + '&pnItems=' + JSON.stringify(this.pnItems) +
						'&roomId=' + this.roomId
				})

			},
			// 打开弹窗
			houseshowPopup(item, roomId, price) {
				this.roomId = roomId
				this.price = price
				this.poupDataItem = item
				let obj = item;
				obj.spys = this.testA(obj.spys)
				obj.fyzc = this.testA(obj.fyzc)
				obj.blss = this.testA(obj.blss)
				obj.yspt = this.testA(obj.yspt)
				obj.xyyp = this.testA(obj.xyyp)

				this.houseTrait = []
				// if (obj.tag.indexOf(',') == -1) {
				// 	this.houseTrait.push(obj.tag)
				// } else {
				// 	this.houseTrait = obj.tag.split(",")
				// }

				this.flag = false;
				this.houseShow = true;
				this.poupData = [];
				this.poupData.push(obj);
			},
			gotoBnt() {
				console.log('进入导航')
				//  经纬度暂时写死，后面介入数据
				let latitude =  Number(this.pageList[0].latitude);
				let longitude = Number(this.pageList[0].longitude);
				let address=this.pageList[0].address
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
			bookClick1() {

				// 酒店名字，入住时间  酒店id （spId == roomId） mid   '&mid='+ this.mid  + '&roomId=' + this.roomId    
				uni.navigateTo({
					url: "/pages/orderConfim/index?hotelTitle=" + this.hotelTitle + '&ydTime=' + this.ydTime +
						'&poupData=' + JSON.stringify(
							this.poupDataItem) + '&price=' + this.price + '&staTimevalue=' + this.staTimevalue +
						'&endTimevalue=' + this.endTimevalue +
						'&startTime=' + this.startTime + '&endTime=' + this.endTime + '&roomId=' + this.roomId
				})
				this.houseShow = false;

			},
			showTimePopup(type) {
				this.popupShow = true
			},
			closeTimePopup(type) {
				this.popupShow = false
				let arr = this.fui.getAllDate(this.staTimevalue, this.endTimevalue)
				this.ydTime = arr.join(',')
				this.getList()
			},
			// 用户选择时间
			calendarChange(e) {
				// this.fui.toast(e.value.join(','))
				this.staTimevalue = e.value[0]
				this.endTimevalue = e.value[1]

				let aStart = (e.lunar[0].cDay > 9) ? e.lunar[0].cDay : ("0" + e.lunar[0].cDay)
				let aEnd = (e.lunar[1].cDay > 9) ? e.lunar[1].cDay : ("0" + e.lunar[1].cDay)

				this.startTime = e.lunar[0].cMonth + '月' + aStart + '日'
				this.endTime = e.lunar[1].cMonth + '月' + aEnd + '日'

				this.startWeek = e.lunar[0].ncWeek
				this.endWeek = e.lunar[1].ncWeek
			},
			// 当前默认时间
			getData() {
				var data = new Date()
				var neaYear = data.getFullYear()
				var newMonth = data.getMonth() + 1
				var newData = data.getDate()
				var newDatas = data.getDate() + 1
				var wk = data.getDay()
				// var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				// this.defaultWeek = weeks[wk]  
				newData = (newData > 9) ? newData : ("0" + newData);
				newDatas = (newDatas > 9) ? newDatas : ("0" + newDatas);
				this.defaultStart = newMonth + '月' + newData + '日'
				this.defaultEnd = newMonth + '月' + newDatas + '日'
				// -日期-
				this.defaultAllstart = neaYear + '-' + newMonth + '-' + newData
				this.defaultAllend = neaYear + '-' + newMonth + '-' + newDatas
			},
			// 获取星期
			getWeekDate(date) {
				let tm = date
				let dt = new Date(tm.replace(/-/g,'/'))
				var now = new Date(dt);
				var day = now.getDay();
				var weeks = new Array(
					'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
				);
				var week = weeks[day];
				return week;
			},
			// 计算两个日期之间的差值
			getDiffDay(date_1, date_2) {
				let totalDays, diffDate
				let tm1 = date_1
				let dt1 = new Date(tm1.replace(/-/g,'/'))
				let tm2 = date_2
				let dt2 = new Date(tm2.replace(/-/g,'/'))
				let myDate_1 = Date.parse(dt1)
				let myDate_2 = Date.parse(dt2)
				// 将两个日期都转换为毫秒格式，然后做差
				diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值

				totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整 

				return totalDays // 相差的天数
			},
			collapseChange(e) {},
			changeTab(e) {
				this.tabFn = e.index;
			},
			userClick() {
				uni.navigateTo({
					url: "/pages/userrating/index?id=" + this.mId
				})
			},
			testA(str) {
				if (typeof str == 'string') {
					return str.split(',');
				}
			},

			houseclosePopup() {
				this.houseShow = false;
				this.flag = true;
			},
			swpChange(e) {
				this.current = e.detail.current;
			},
		},

	}
</script>

<style lang="scss" scoped>
	.hotelDetails {
		height: 100%;

		.lb-img {
			position: relative;

			/deep/.fui-banner__wrap {
				height: 380rpx !important;
			}

			.icon-img {
				position: absolute;
				top: 0rpx;
				z-index: 999;
				right: 30rpx;
				display: flex;

				.icon-btn {
					background: rgba(0, 0, 0, 0);
					width: 70rpx;
					height: 60rpx;

					&::after {
						border-width: 0;
					}
				}

				.iconPn {
					width: 37rpx;
					height: 36rpx;

					&:first-child {
						margin-right: 30rpx;
					}
				}

			}
		}

		image {
			width: 100%;
		}

		.fui-banner__wrap {
			.fui-banner__wrap {
				height: 380rpx;
			}
		}

		.hotelDetaCotent {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-top: -30rpx;
			position: relative;
			z-index: 99;
			padding: 20rpx 28rpx;
			min-height: 100rpx;

			.hotel-title {
				color: #1D1D1D;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;

				text {
					color: #7E7E7D;
					font-size: 26rpx;
				}

				.title-text {
					width: 80%;
				}

				.pingfen {
					padding: 0 8rpx;
					height: 40rpx;
					background: #35743D;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					border-radius: 25rpx 0 25rpx 25rpx;
					font-size: 22rpx;
				}
			}

			.hot-address {
				color: #7E7E7D;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				padding: 10rpx 0;

				.go-address {
					width: 40rpx;
					height: 40rpx;
				}

				.addresspn {
					width: 20rpx;
					height: 27rpx;
					margin-right: 10rpx;
				}

			}

			.bioa-style {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				overflow: hidden;

				.biao-list {
					padding: 0 20rpx;

					position: relative;

					.biao-item {
						color: #B4B4B4;
						font-size: 26rpx;
						padding: 3 6rpx;
						float: left;
						background: #F8F8F8;
						// height: 42rpx;
						margin: 10rpx;
					}
				}
			}
		}

		.specificContent {
			margin-top: 12rpx;
			// height: 300rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.timeHeader {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 0;
				position: relative;

				image {
					position: absolute;
					right: 45rpx;
					width: 20rpx;
					height: 20rpx;
				}
			}

			.flex-ruzhu {
				color: #393939;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0;
				color: #2E2E2E;
				font-size: 28rpx;

				.ruzhu-time {
					display: flex;
					align-items: center;
					line-height: 60rpx;
					margin-right: 8rpx;
					font-weight: bold;

					.ruzhu-week {
						margin-left: 8rpx;
						font-size: 22rpx;
						color: #2E2E2E;
						font-weight: 400;
					}
				}

				.all-time {
					font-size: 20rpx;
					color: #2E2E2E;
					margin: 0 14rpx;
					padding: 10rpx;
					border: 1px solid #B4B4B4;
					border-radius: 22rpx;
				}

				.lidian-text {
					font-size: 20rpx;
					line-height: 28rpx;
				}

				.lidian-time {
					color: #2E2E2E;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					line-height: 60rpx;
					font-weight: bold;

					.lidian-week {
						margin-left: 8rpx;
						font-size: 22rpx;
						color: #2E2E2E;
						font-weight: 400;
					}
				}

			}

			// 折叠点击的内容部分
			.roomContent {
				margin-bottom: 20rpx;

				.room-cont {
					margin-bottom: 10rpx;
					box-shadow: 0px 2px 4px #E4E4E4;

					.img-rom {

						width: 26%;
						height: 200rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 200rpx;
							border-radius: 16rpx;
						}
					}

					.room-list {
						font-size: 26rpx;
						width: 70%;
						position: relative;

						.room1 {
							color: #1D1D1D;
							font-size: 30rpx;
							font-weight: bold;
							padding: 5rpx 0;
						}

						.room2 {
							color: #7E7E7D;
							padding: 10rpx 0;
						}

						.room3 {
							color: #7E7E7D;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 10rpx 0;

							.room-ro3 {
								display: flex;
								justify-content: flex-start;

								.room-tag {
									color: #B4B4B4;
									font-size: 24rpx;
									padding: 0 6rpx;
									// float: left;

									background: #F8F8F8;
									height: 32rpx;
									margin-right: 10rpx;
								}

							}

							.room3-price {
								color: #D93C3C;
								font-size: 30rpx;

								text {
									font-size: 24rpx;
									color: #1D1D1D;
								}
							}
						}

						.room4 {
							color: #727272;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.room-method {
								width: 70rpx;
								height: 74rpx;
								border: 1px solid #35743D;
								border-radius: 10rpx;
								text-align: center;

								.method1 {
									height: 50%;
									background-color: #35743D;
									color: #FFFFFF;

								}

								.method2 {
									color: #35743D;
								}
							}
						}

						.room5 {
							width: 120rpx;
							height: 40rpx;
							background: #35743D;
							border-radius: 30rpx 0 30rpx 0;
							color: #FFFFFF;
							text-align: center;
							line-height: 40rpx;
							position: absolute;
							right: 0;
						}



					}
				}

				// 折叠面板
				.fui-item__box {
					width: 100%;
					padding: 26rpx 16rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
				}

				.fui-logo {
					width: 48rpx;
					height: 48rpx;
					margin-right: 24rpx;
					display: block;
				}

				// 折叠下的房间内容
				.fui-descr {
					width: 100%;
					padding: 32rpx;
					font-size: 28rpx;
					color: #7F7F7F;
					word-break: break-all;
					box-sizing: border-box;
					padding: 0 16rpx;
					position: relative;

					.fui-fold {
						// background: #EFEFEF;
						font-size: 28rpx;
						padding: 14rpx;
						height: 230rpx;
						border-bottom: 1px solid #E0E0E0;

						.fold1 {
							display: flex;
							justify-content: space-between;
							color: #1D1D1D;
							margin: 12rpx 0;

							.house-text {
								font-size: 28rpx;
								font-weight: bold;
							}

							.house-num {
								font-size: 24rpx;
								color: #35743D;
							}
						}

						.fold2 {
							color: #727272;
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.fold-biao {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.biao-t {
									color: #B4B4B4;
									font-size: 24rpx;
									padding: 0 6rpx;
									// float: left;

									background: #F8F8F8;
									height: 32rpx;
									margin-right: 10rpx;
								}
							}

							.room-method {
								width: 70rpx;
								height: 74rpx;
								border: 1px solid #35743D;
								border-radius: 10rpx;
								text-align: center;

								.method1 {
									height: 50%;
									background-color: #35743D;
									color: #FFFFFF;

								}

								.method2 {
									font-size: 22rpx;
									color: #35743D;
								}
							}
						}

						.fold3 {
							.fold-price {
								color: #D93C3C;
								font-size: 30rpx;
							}

							.fold-text {
								color: #B4B4B4;
								font-size: 24rpx;
								margin-left: 10rpx;
								text-decoration: line-through;
							}

							.fold-discount {
								width: 120rpx;
								height: 40rpx;
								background: #35743D;
								border-radius: 30rpx 0 30rpx 0;
								color: #FFFFFF;
								text-align: center;
								line-height: 40rpx;
								position: absolute;
								right: 30rpx;
								font-size: 24rpx;
							}
						}
					}
				}

			}

			// 房间详情弹窗
			/* 自定义内容区样式需自行控制 */
			.fui-custom__house {
				width: 100%;
				padding-bottom: 150rpx;

				image {
					width: 100%;
					height: 370rpx;
				}

				.show-house-content {
					font-size: 32rpx;
					font-weight: bold;
					margin: 48rpx 25rpx;
					border-bottom: 1px solid #D0D0D0;

					.house-content-title {
						margin: 20rpx 0;

					}

					.house-conten-trait {
						font-size: 26rpx;
						display: flex;
						align-items: center;
						color: #9D9D9D;

						.trait-item {}


					}
				}

				.show-house-policy {
					display: flex;
					margin-bottom: 38rpx;


					.policy-name {
						width: 20%;
						font-size: 26rpx;
						color: #1D1D1D;
						font-weight: bold;
						margin-right: 20rpx;

					}

					.policy-explain {
						width: 80%;
						display: flex;
						font-size: 24rpx;

						.pol-item {
							margin-right: 10rpx;
						}
					}

					&:nth-child(6) {
						margin-bottom: 60rpx;
					}
				}

				.house-type {
					font-size: 28rpx;
					font-weight: bold;

					.ht-text {
						margin-top: 12rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #1D1D1D;
					}
				}

				.policy-services {
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 64rpx;
					margin-bottom: 12rpx;

					.services-title {
						margin-top: 10rpx;
						font-size: 26rpx;

						.scontent-title {
							font-weight: 400;
							margin-top: 5rpx;
							font-size: 26rpx;
						}
					}
				}

				.merchant-services {
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 64rpx;
					margin-bottom: 12rpx;

					.tservices-title {
						margin-top: 10rpx;
						font-size: 26rpx;

						.tscontent-title {
							font-weight: 400;
							margin-top: 5rpx;
							font-size: 26rpx;
						}
					}
				}
			}
		}

		/deep/ .fui-collapse__content-wrap {
			padding-top: 16rpx;
		}

		// 箭头 位置
		/deep/ .fui-collapse__item-ani {
			position: absolute !important;
			top: 35% !important;
			right: 10rpx !important;

		}

		.netFriend {
			padding-bottom: 30rpx;

			.net-text {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				color: #1D1D1D;
				margin: 40rpx 0 16rpx 0;
				font-weight: bold;

				.ntext1 {
					font-size: 26rpx;
				}
			}

			.net-content {
				background: #FFFFFF;
				padding-top: 32rpx;
				border-radius: 16rpx;
				padding-bottom: 20rpx;

				.content-head {
					background-color: #EFEFEF;
					height: 160rpx;
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #35743D;

					.head-left {
						border-right: 1px solid #B4B4B4;
						width: 20%;
						text-align: center;
						font-size: 24rpx;

						.leftpf {
							font-size: 38rpx;
							font-weight: bold;
						}
					}

					.head-right {
						width: 80%;
						height: 100%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #35743D;
						font-size: 24rpx;
						margin-left: 40rpx;

						.right1 {
							text-align: center;
							position: relative;
							margin-right: 20rpx;

							.right-ring {
								text-align: center;
								position: absolute;
								right: 0rpx;
								top: 38rpx;
								font-size: 28rpx;
								width: 100%;

							}


						}
					}
				}

				.content-comment {
					.persdata {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 60rpx 0 20rpx 0;

						.persdata-left {
							display: flex;

							image {
								width: 100rpx;
								height: 100rpx;
								margin-right: 16rpx;
							}

							.pdata-center {
								color: #1D1D1D;

								.pdata-time {
									color: #969696;
								}

							}
						}
					}

					.persdat-details {
						margin: 20rpx 0 40rpx 0;
						font-size: 28rpx;
						color: #1D1D1D;
					}

					.consumed {
						color: #7E7E7D;
						margin-bottom: 20rpx;
						font-size: 26rpx;
					}

					.persdat-all {
						margin-top: 20rpx;
						text-align: center;
						color: #1D1D1D;
						font-size: 26rpx;
						padding: 10rpx 0;
					}
				}
			}
		}

		.hotelParticular {
			margin-top: 20rpx;
			padding-bottom: 120rpx;

			.htext {
				color: #1D1D1D;
				font-size: 32rpx;
				font-weight: bold;
				margin: 20rpx 0 16rpx 0;
				display: block;
			}

			.particular-content {
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;

				.pcont-tab {
					color: #1D1D1D;

					.pctab1 {
						font-size: 32rpx;
						font-weight: bold;
						margin: 48rpx 0 20rpx 0;

						.pctab1-text {
							font-size: 28rpx;
							color: #797979;
							font-weight: 400;
							margin-left: 24rpx;
						}

					}

					.pctab1-phone {
						margin: 40rpx 0;
					}

					.pctab1-guide {
						font-weight: bold;
						font-size: 32rpx;

						.pctab1-guide-text {
							font-weight: 400;
							font-size: 28rpx;
							margin: 20rpx 0 40rpx 0;
						}
					}

					.pctab1-hotel {
						font-weight: bold;
						font-size: 32rpx;

						.pb1-space {
							font-weight: 400;
							font-size: 28rpx;
							margin: 20rpx 0 40rpx 0;
						}
					}
				}
			}

		}

		// 查看房型 暂时取消掉
		.lookBook {
			background: #FFFFFF;
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0rpx;
			// right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 999;
			font-size: 28rpx;

			.price-book {
				margin-left: 35rpx;

				.book-yaun {
					font-size: 20rpx;
					color: #B4B4B4;

					.yaun-yuan {
						text-decoration: line-through;
						margin-right: 17rpx;
					}

					.yaun-num {
						font-size: 26rpx;
						color: #D93C3C;
						font-weight: bold;
					}
				}

				.book-num {
					width: 120rpx;
					height: 40rpx;
					background: #35743D;
					border-radius: 30rpx 0 30rpx 0;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					font-weight: 400;
				}
			}

			.lookbtn {
				color: #FFFFFF;
				height: 72rpx;
				background-color: #35743D;
				border-radius: 38rpx;
				text-align: center;
				line-height: 72rpx;
				margin: 0 20rpx;
				padding: 0rpx 60rpx;
			}
		}

	}

	.rating-imgs {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		image {
			width: 202rpx;
			height: 200rpx;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
		}
	}
</style>
